<template>
  <div class="home">
    <swiper auto height="100px" :interval=3000>
      <swiper-item class="black"><h2 class="title fadeInUp animated">您好！我是必知！</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">必知是什么？</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">必知是朋友</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">必知是知己</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">恰好你需要</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">恰好我拥有</h2></swiper-item>
    </swiper>

    <!--<h1>{{ msg }}</h1>-->
    <!--<h2>这是首页</h2>-->

    <grid :cols="col" :show-lr-borders="false" :show-vertical-dividers="false" style="border:none;background-color:#fff;">
      <!--<grid-item link="/apiCenter" style="display: inline-block!important;">-->
        <!--<badge text="1" style="position: absolute;top:10px;right:20px;"></badge>-->
        <!--<img slot="icon" src="../assets/images/home/api_center_fill.png">-->
        <!--<span slot="label">题库中心</span>-->
      <!--</grid-item>-->
      <!--<grid-item link="/apiMy" >-->
        <!--<img slot="icon" src="../assets/images/home/api_fill.png">-->
        <!--<span slot="label">我的题库</span>-->
      <!--</grid-item>-->
      <grid-item @on-item-click="onItemClick('wait')">
        <img slot="icon" src="../assets/images/home/apply_fill.png">
        <span slot="label">开始练习</span>
      </grid-item>
      <grid-item @on-item-click="onItemClick('wait')">
        <img slot="icon" src="../assets/images/home/my_moni_fill.png">
        <span slot="label">备忘录</span>
      </grid-item>
      <grid-item link="/accountMessage">
        <img slot="icon" src="../assets/images/home/message_fill.png">
        <span slot="label">我的消息</span>
      </grid-item>
      <grid-item @on-item-click="onItemClick('wait')">
        <img slot="icon" src="../assets/images/home/analysis_fill.png">
        <span slot="label">学习分析</span>
      </grid-item>
      <grid-item link="/questionCenter">
        <img slot="icon" src="../assets/images/home/document_fill.png">
        <span slot="label">我的题库</span>
      </grid-item>
      <!--<grid-item @on-item-click="onItemClick('account')">-->
        <!--<img slot="icon" src="../assets/images/home/account_fill.png">-->
        <!--<span slot="label">个人设置</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('wait')">-->
        <!--<img slot="icon" src="../assets/images/home/api_manage_fill.png">-->
        <!--<span slot="label">API管理</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('wait')">-->
        <!--<img slot="icon" src="../assets/images/home/apply_manage_fill.png">-->
        <!--<span slot="label">申请管理</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('moni')">-->
        <!--<img slot="icon" src="../assets/images/home/dynamic_fill.png">-->
        <!--<span slot="label">监控管理</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('wait')" >-->
        <!--<img slot="icon" src="../assets/images/home/remind_fill.png">-->
        <!--<span slot="label">告警管理</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('more')">-->
      <grid-item @on-item-click="onItemClick('wait')" >
        <img slot="icon" src="../assets/images/home/more_fill.png">
        <span slot="label">更多</span>
      </grid-item>
    </grid>

    <div v-transfer-dom>
      <popup v-model="showMore" position="right">
        <div style="width:200px;">
          <grid :cols="moreCol" :show-lr-borders="false" :show-vertical-dividers="false" style="border:none;background-color:#fff;">
            <grid-item link="/apiCenter" style="display: inline-block!important;">
              <badge text="1" style="position: absolute;top:10px;right:20px;"></badge>
              <img slot="icon" src="../assets/images/home/api_center_fill.png">
              <span slot="label">API中心</span>
            </grid-item>
            <grid-item link="/apiMy" >
              <img slot="icon" src="../assets/images/home/api_fill.png">
              <span slot="label">我的API</span>
            </grid-item>
            <grid-item link="/apiApplyMy">
              <img slot="icon" src="../assets/images/home/apply_fill.png">
              <span slot="label">我的申请</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick('wait')">
              <img slot="icon" src="../assets/images/home/my_moni_fill.png">
              <span slot="label">我的监控</span>
            </grid-item>
            <grid-item link="/accountMessage">
              <img slot="icon" src="../assets/images/home/message_fill.png">
              <span slot="label">我的消息</span>
            </grid-item>
            <grid-item link="/apiMyCall" @on-item-click="onItemClick">
              <img slot="icon" src="../assets/images/home/analysis_fill.png">
              <span slot="label">接口分析</span>
            </grid-item>
            <grid-item link="/helpCenter" @on-item-click="onItemClick">
              <img slot="icon" src="../assets/images/home/document_fill.png">
              <span slot="label">帮助中心</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick('account')">
              <img slot="icon" src="../assets/images/home/account_fill.png">
              <span slot="label">个人设置</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick('wait')">
              <img slot="icon" src="../assets/images/home/api_manage_fill.png">
              <span slot="label">API管理</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick('wait')">
              <img slot="icon" src="../assets/images/home/apply_manage_fill.png">
              <span slot="label">申请管理</span>
            </grid-item>
          </grid>
        </div>
      </popup>
    </div>

    <swiper auto height="30px" direction="vertical" :interval=5000 class="text-scroll" :show-dots="false" style="margin-top:10px;border:none;">
      <swiper-item><p>必知 V1.0上线啦！！！</p></swiper-item>
      <swiper-item><p>刚接触VUE，边学习边使用</p></swiper-item>
      <swiper-item><p>希望可以一起交流学习</p></swiper-item>
    </swiper>

    <!--<divider style="margin-top:20px;">高错误率错题</divider>-->
    <!--必须引，只是为了使用panel的样式-->
    <panel></panel>

    <div class="weui-panel weui-panel_access">
      <!--标题-->
      <div class="weui-panel__hd">高错误率错题</div>
      <!--列表-->
      <div class="weui-panel__bd">
        <div v-for="wrong in wList" @click.active="toQuestionDetail(wrong.id)" class="weui-media-box weui-media-box_text">
          <h4 class="weui-media-box__title"><span class="vux-badge" style="margin-bottom: 3px;">顶</span>&nbsp;{{ wrong.name }}</h4>
          <p class="weui-media-box__desc">{{ wrong.answer }}</p>
          <ul class="weui-media-box__info">
            <!--<li class="weui-media-box__info__meta">浏览8次</li>-->
            <li class="weui-media-box__info__meta">{{ wrong.createDate }}</li>
            <!--<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其他信息</li>-->
          </ul>
        </div>
      </div>
      <!--更多-->
      <div class="weui-panel__ft">
        <a @click="toQuestionCenter" class="weui-cell weui-cell_access weui-cell_link">
          <div class="weui-cell__bd" style="text-align: center">查看更多</div>
        </a>
      </div>
    </div>




    <divider style="margin-top:20px;">近7日答题走势（友情提醒：假的）</divider>
    <v-chart :data="data">
      <v-scale y :min="0" /> <!-- 默认 y 轴数值从数据的最小值到最大值，此处重置为从 0 开始 -->
      <v-point :styles="{
        stroke: '#fff',
        lineWidth: 1
      }"/>
      <v-tooltip :show-item-marker="false" :on-show="onShow" /> <!-- onShow 为 F2 属性而非事件-->
      <v-line />
    </v-chart>

    <divider style="margin-top:20px;">@Author GaoYuan</divider>
    <div style="height:75px;"></div>
    <myTabbar></myTabbar>
  </div>
</template>

<script>
import { Badge, Swiper, SwiperItem, Grid, GridItem, Divider,
  VChart, VPoint, VTooltip, VLine, VScale, AlertModule, Loading, TransferDomDirective as TransferDom, Popup, Panel, ToastPlugin } from 'vux'
import VueRouter from '../router/routes.js'
import myTabbar from '../components/tabbar/Tabbar.vue'
import Vue from 'vue'

Vue.use(ToastPlugin)

export default {
  name: 'Home',
  directives: {
    TransferDom
  },
  components: {
    myTabbar: myTabbar,
    Badge,
    Swiper,
    SwiperItem,
    Grid,
    GridItem,
    Divider,
    VChart,
    VPoint,
    VTooltip,
    VLine,
    VScale,
    AlertModule,
    Loading,
    Popup,
    Panel
  },
  data () {
    return {
      page: 1,
      pageSize: 5,
      msg: 'Welcome to Home',
      showMore: false,
      col: 4,
      moreCol: 2,
      onShow (ev) {
        const { items } = ev
        items[0].name = null
        items[0].value = '$ ' + items[0].value
      },
      data: [
        { day: '周一', value: 300 },
        { day: '周二', value: 400 },
        { day: '周三', value: 350 },
        { day: '周四', value: 500 },
        { day: '周五', value: 490 },
        { day: '周六', value: 600 },
        { day: '周日', value: 900 }
      ],
      wtype: '4',
      wList: [{
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell',
        date: '10小时前',
        clickNum: '浏览量'
      }, {
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell',
        date: '10小时前',
        clickNum: '浏览量'
      }, {
        title: '标题三',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell',
        date: '10小时前',
        clickNum: '浏览量'
      }, {
        title: '标题四',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell',
        date: '10小时前',
        clickNum: '浏览量'
      }, {
        title: '标题五',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell',
        date: '10小时前',
        clickNum: '浏览量'
      }
      ]
    }
  },
  methods: {
    onItemClick (type) {
      if (type === 'moni') {
        this.$store.dispatch('updateTabbarIndex', {tabbarIndex: 1})
      }
      if (type === 'warn') {
        this.$store.dispatch('updateTabbarIndex', {tabbarIndex: 2})
      }
      if (type === 'account') {
        this.$store.dispatch('updateTabbarIndex', {tabbarIndex: 3})
      }
      if (type === 'more') {
        this.showMore = true
      }
      if (type === 'wait') {
        AlertModule.show({
          title: '敬请期待',
          content: '敬请期待',
          onShow () {
          },
          onHide () {
          }
        })
      }
    },
    // 获取题目列表
    getQuestionList () {
      var _this2 = this
      this.$axios.get('/bz/bzQuestion/page', {pageNo: _this2.page, pageSize: _this2.pageSize})
        .then(function (response) {
          if (response.data.data) {
            _this2.wList = response.data.data.results
          } else {
            this.$vux.toast.text('没有成功获取到问题数据')
          }
        })
    },
    // 前往我的题目
    toQuestionCenter () {
      VueRouter.push({
        path: '/questionCenter'
      })
    },
    // 前往题目详情
    toQuestionDetail (id) {
      VueRouter.push({
        path: '/questionDetail',
        query: {id: id}
      })
    }
  },
  mounted: function () {
    this.getQuestionList()
  },
  created: function () {
    // this.$vux.loading.show({text: '正在获取数据'})
    // setTimeout(() => {
    //   var loadDom = this
    //   this.$axios.get('/demo/get')
    //     .then(function (response) {
    //       loadDom.$vux.loading.hide()
    //       AlertModule.show({
    //         title: '请求结果',
    //         content: response.data.data.id,
    //         onShow () {
    //           console.log('Module: I\'m showing')
    //         },
    //         onHide () {
    //           console.log('Module: I\'m hiding now')
    //         }
    //       })
    //     })
    //     .catch((error) => {
    //       loadDom.$vux.loading.hide()
    //       console.log(error)
    //     })
    // }, 1000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<style scoped>
  .copyright {
    font-size: 12px;
    color: #ccc;
    text-align: center;
  }
  .text-scroll {
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
  }
  .text-scroll p{
    font-size: 12px;
    text-align: center;
    line-height: 30px;
  }
  .black {
    background-color: #000;
  }
  .title{
    line-height: 100px;
    text-align: center;
    color: #fff;
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .vux-indicator.custom-bottom {
    bottom: 30px;
  }
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  .fadeInUp {
    animation-name: fadeInUp;
  }
  .swiper-demo-img img {
    width: 100%;
  }
</style>
